<template>
  <div id='auth'>
    <h3>Change Password</h3>
    <a-form :form="form" layout='inline' @submit="handleSubmit" class="form">
      <a-form-item v-bind="formItemLayout" class="form-item">
        <a-input-password class="input passwd"
          placeholder="Current Password"
          v-decorator="[
            'crnpasswd',
            {
              rules: [{ required: true, message: 'Please input your current password!' }],
            },
          ]"
        >
        </a-input-password>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" class="form-item">
        <a-input-password class="input passwd"
          placeholder="New Password"
          v-decorator="[
            'newpasswd',
            {
              rules: [{ required: true, message: 'Please input your current password!' }],
            },
          ]"
        >
        </a-input-password>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" class="form-item">
        <a-input-password class="input passwd"
          placeholder="Confirm New Password"
          v-decorator="[
            'cfmpasswd',
            {
              rules: [{ required: true, message: 'Please input your current password!' }],
            },
          ]"
        >
        </a-input-password>
      </a-form-item>
      <a-form-item v-bind="tailFormItemLayout" class="form-item">
        <a-button type="primary" html-type="submit" class="subm">
          Update auth
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>


<style>
  #auth {
    padding: 0;
    margin: 0;
  }
  #auth h3 {
    margin: 20px 0 0 0;
    padding: 0 50px;
    font-size: 20px;
  }
  #auth .form {
    margin: 20px 0 0 0;
    padding: 0 60px;
    font-size: 20px;
    width: 800px;
  }
  #auth .form-item {
    margin: 0 20px 20px 0;
  }
  #auth .input {
    height: 50px;
  }
  #auth .passwd {
    width: 620px;
  }
  #auth .subm {
    width: 620px;
    height: 50px;
    margin: 0;
  }
</style>